<template>
  <div class="app-container">
    <div>
      <el-row :gutter="20">
        <el-col :span="24" :xs="24">
          <!-- 搜索表单 -->
          <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
            <el-form-item label="货号" prop="clothesNumber">
              <el-input v-model="queryParams.clothesNumber" placeholder="请输入服装货号" clearable size="small" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="名称" prop="clothesName">
              <el-input v-model="queryParams.name" placeholder="请输入服装名称" clearable size="small" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="类别" prop="categoryId">
              <el-select v-model="queryParams.categoryId" placeholder="请选择">
                <el-option v-for="item in categoryOptions" :key="item.categoryId" :label="item.categoryName" :value="item.categoryId" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>

          <!-- 数据操作按钮 -->
          <el-row :gutter="10">
            <el-col :span="1.5">
              <el-button type="primary" icon="el-icon-plus" size="small" @click="handleAdd">新增</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button type="success" icon="el-icon-edit" size="small" :disabled="!single" @click="handleUpdate">修改</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button type="danger" icon="el-icon-delete" size="small" :disabled="multiple" @click="handleDelete">删除</el-button>
            </el-col>
          </el-row>
          <el-table v-loading="loading" :data="clothesList" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column prop="clothesId" label="id" align="center" width="100" />
            <el-table-column prop="clothesNumber" label="服装货号" align="center" width="100" />
            <el-table-column prop="clothesName" label="服装名称" align="center" />
            <el-table-column prop="category.catgeoryName" label="类别名字" width="200" align="center" />
            <!-- <el-table-column prop="normId" label="规格id" width="200" align="center" /> -->
            <!-- <el-table-column prop="amount" label="数量" align="center" />
            <el-table-column prop="sale" label="销售额" align="center" /> -->
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button size="small" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
                <el-button size="small" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页加载 -->
          <el-pagination
            :current-page="queryParams.pageNum"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="queryParams.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-col>
      </el-row>

      <!-- <el-button type="primary" v-if="!dialogVisible" @click="dialogVisible = true">点击打开 Dialog</el-button> -->
      <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item v-if="form.clothesId" label="服装id" prop="id">
            <el-input v-model="form.clothesId" placeholder="请输入服装id" disabled />
          </el-form-item>
          <el-form-item label="服装货号" prop="clothesNumber">
            <el-input v-model="form.clothesNumber" placeholder="请输入货号" />
          </el-form-item>
          <el-form-item label="服装名称" prop="clothesName">
            <el-input v-model="form.clothesName" placeholder="请输入名称" />
          </el-form-item>
          <el-form-item label="类别" prop="categoryId">
            <el-select v-model="form.categoryId" placeholder="请选择">
              <el-option v-for="item in categoryOptions" :key="item.categoryId" :label="item.categoryName" :value="item.categoryId" />
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { listClothesByPage, delClothes, addClothes, getClothesList, updateClothes } from '@/api/clothes'
import { getCategoryList } from '@/api/category'
export default {
  name: 'Clothes',
  data() {
    return {
        loading: false,
        clothesList: [],
        categoryOptions: [],
        multiple: true,
        single: false,
        title: '',
        open: false,
        total: 0,
        ids: [],
        form: {},
        queryParams: { // 查询参数
        pageNum: 1,
        pageSize: 5,
        clothesName: null,
        clothesId: null,
        categoryId: null
      },
        rules: {
        name: [
            { required: true, message: '请输入服装名称', trigger: 'blur' },
            { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
        ],
        clothesNumber: [
            { required: true, message: '请输入货号', trigger: 'blur' }
          ]
      }
    }
  },
  created() {
    this.getClothesList()
    this.getCategoryOptions()
  },
  methods: {
    getClothesList(){
      this.loading = true
      listClothesByPage(this.queryParams).then(response => {
        this.clothesList = response.data.list
        this.total = response.data.total
        this.loading = false
      })
    },
    getCategoryOptions(){
        getCategoryList().then(response => {
          this.categoryOptions = response.data
          console.log('类别列表', this.categoryOptions)
        })
      },

    handleQuery(){
      this.queryParams.pageNum = 1
      this.getClothesList()
    },
    resetQuery(){
      this.$refs.queryForm.resetFields()
      this.getClothesList()
    },
    handleUpdate(row) {
  this.resetForm()
  if (row) {
      this.form.clothesId = row.clothesId || this.ids[0]
    } else {
      this.form.clothesId = this.ids[0] || null
    }
    this.open = true
    this.title = '修改数据'
},
handleDelete(row) {
  const id = row.clothesId || this.ids[0]
  this.$confirm('是否确认删除ID为"' + id + '"的数据项?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
  .then(() => {
    return delClothes({ id }) // Passing ID directly
  })
  .then(() => {
    this.getClothesList()
    this.$message.success('删除成功')
  })
  .catch(() => {
    this.$message.error('删除失败')
  })
},
submitForm: function() {
  this.$refs['form'].validate(valid => {
    if (valid) {
      if (this.form.clothesId != null) { // 如果存在 id 属性，则执行修改操作
        updateClothes(this.form).then(response => {
          this.$message.success(response.msg)
          this.getClothesList()
          this.cancel()
        })
      } else { // 如果不存在 id 属性，则执行添加操作
        addClothes(this.form).then(response => {
          this.$message.success(response.msg)
          this.getClothesList()
          this.cancel()
        })
      }
    }
  })
},

    handleAdd(){
      this.resetForm()
      this.open = true
      this.title = '添加数据'
    },

    cancel(){
      this.open = false
      this.title = ''
      this.resetForm()
    },
    handleSelectionChange(selection){
      this.ids = selection.map(item => item.id)
      // eslint-disable-next-line eqeqeq
      this.single = selection.length == 1
      this.multiple = !selection.length
      console.log('Selected IDs:', this.ids)
    },
    resetForm(){
      this.form = {
        clothesId: null,
        clothesName: null,
        catgeoryId: null,
        clothesNumber: null
      }
    },
    handleSizeChange(val){
      this.queryParams.pageSize = val
      this.getClothesList()
    },
    handleCurrentChange(val){
      this.queryParams.pageNum = val
      this.getClothesList()
      console.log('pageNum=', this.queryParams.pageNum)
      console.log('val=', val)
     }
   }
 }

</script>
